<template>
	<view id="all">
		<view class="top">
			<!-- 轮播图 -->
			<view class="swiper-w">
				<swiper class="swiper" autoplay="true" interval="2000" duration="1500" circular="true">
						<swiper-item v-for="item in swipers" :key="index" class="swiperImg">
							<image :src="item.image"></image>
						</swiper-item>
				</swiper>
			</view>
			<!-- 搜索框 -->
			<view class="search">
				<image src="../../static/imgs/search.png"></image>
				<input type="text" placeholder-style="color:#fff" placeholder="超级秒杀!轮胎99元起···"/>
			</view>
		</view> <!-- top结束-->
		<!-- 保养列表 -->
		<view style="margin-bottom:450rpx"><maintain2 :array="array"></maintain2></view>
		<!-- 添加车辆按钮 -->
		<view class="indexAddBtn">
			<button class="indexBtn">点击添加车辆</button>
			<image src="../../static/imgs/jia.png"></image> 
		</view>
		<!-- 广告 -->
		<view class="advertising"><image src="../../static/imgs/guanggao.png"></image></view>
		<!-- 天天秒杀 -->
		<view><secKill2 :seckills="seckills" ></secKill2></view>
		<!-- 详情列表 -->
		<view><SpellDeals2 :spellDeals="spellDeals"></SpellDeals2></view>
	</view><!-- all -->
</template>

<script>
	import maintain2 from "../../components/maintain2.vue"
	import secKill2 from "../../components/secKill2.vue"
	import SpellDeals2 from "../../components/SpellDeals2.vue"
	export default {
		components:{
			maintain2,
			secKill2,
			SpellDeals2
		},
		data() {
			return {
				swipers:[
					{"image":"../../static/imgs/banner%20(3).png"},
					{"image":"../../static/imgs/banner%20(3).png"},
					{"image":"../../static/imgs/banner%20(3).png"}
				],
				array:[
					{
						"image":"../static/imgs/water.png",
						"bg":"background:linear-gradient(0deg,rgba(88,152,255,1),rgba(124,213,248,1))",
						"text":"发动机养护"},
					{
						"image":"../static/imgs/duntai.png",
						"bg":"background:linear-gradient(180deg,rgba(254,217,132,1),rgba(255,152,87,1))",
						"text":"燃油系统养护"},
					{
						"image":"../static/imgs/paomo.png",
						"bg":"background:linear-gradient(0deg,rgba(71,196,120,1),rgba(154,239,227,1))",
						"text":"发动机舱清洗"},
					{
						"image":"../static/imgs/youxiang.png",
						"bg":"background:linear-gradient(180deg,rgba(112,212,255,1),rgba(41,155,251,1))",
						"text":"前雨刷"},
					{
						"image":"../static/imgs/kongtiao.png",
						"bg":"background:linear-gradient(180deg,rgba(255,132,164,1),rgba(253,38,108,1))",
						"text":"空调系统养护"},
					{
						"image":"../static/imgs/lengque.png",
						"bg":"background:linear-gradient(0deg,rgba(88,152,255,1),rgba(124,213,248,1))",
						"text":"冷却系统养护"},
					{
						"image":"../static/imgs/yugua.png",
						"bg":"background:linear-gradient(0deg,rgba(234,64,61,1),rgba(251,138,115,1))",
						"text":"引擎系统养护"},
					{
						"image":"../static/imgs/rose.png",
						"bg":"background:linear-gradient(60deg,rgba(201,199,202,1),rgba(139,137,140,1))",
						"text":"道路救援"}
				],
				seckills:[
					{
						"img":"../static/imgs/panda.png","text":"￥0.01","title":"立刻抢",
						"style":"background:linear-gradient(-45deg,rgba(0,74,157,1),rgba(116,180,251,1));box-shadow:0px 8px 13px 0px rgba(68,136,212,0.3);",
					},
					{
						"img":"../static/imgs/panda.png","text":"￥0.01","title":"立刻抢",
						"style":"background:linear-gradient(135deg,rgba(255,95,24,1),rgba(255,28,28,1));box-shadow:0px 8px 13px 0px rgba(255,71,31,0.3);"
					},
					{
						"img":"../static/imgs/panda.png","text":"￥0.01","title":"立刻抢",
						"style":"background:linear-gradient(-45deg,rgba(0,74,157,1),rgba(116,180,251,1));box-shadow:0px 8px 13px 0px rgba(68,136,212,0.3);",
					},
					{
						"img":"../static/imgs/panda.png","text":"￥0.01","title":"立刻抢",
						"style":"background:linear-gradient(135deg,rgba(255,95,24,1),rgba(255,28,28,1));box-shadow:0px 8px 13px 0px rgba(255,71,31,0.3);"
					}
				],
				spellDeals:[
					{
						"img":"../static/imgs/car.png",
						"text":"爆款",
						"texts":"轮胎/汽车轮胎 205/55R16 91V 韧悦 ENERGY XM2",
						"money":"￥520",
						"number":"已拼200件"
					},
					{
						"img":"../static/imgs/car.png",
						"text":"爆款",
						"texts":"轮胎/汽车轮胎 205/55R16 91V 韧悦 ENERGY XM2",
						"money":"￥520",
						"number":"已拼200件"
					},
					{
						"img":"../static/imgs/car.png",
						"text":"爆款",
						"texts":"轮胎/汽车轮胎 205/55R16 91V 韧悦 ENERGY XM2",
						"money":"￥520",
						"number":"已拼200件"
					},
					{
						"img":"../static/imgs/car.png",
						"text":"爆款",
						"texts":"轮胎/汽车轮胎 205/55R16 91V 韧悦 ENERGY XM2",
						"money":"￥520",
						"number":"已拼200件"
					}
				]
			}	
		}
	}
</script>

<style>
.top {display:flex;justify-content: center;overflow: hidden}
/* 搜索框 */
.search{width:694rpx;margin-top:16rpx;height:70rpx;background:rgba(255,255,255,0.4);position: absolute;top:7rpx;display:flex;justify-content: center;align-items: center;opacity:0.36;border-radius:29px;text-size:10rpx;text-weight:blod;}
.search image{width:34rpx;height:36rpx}
.search input{margin-left:10rpx}
/* 轮播图 */
.swiper-w{width: 100%;height:400rpx;position:relative}
.swiper{height:400rpx ;}
.swiperImg image{width:100%;height: 400rpx;}
/* 添加车辆按钮 */
.indexAddBtn{position:relative}
.indexAddBtn image{position:absolute;top:32rpx;left:255rpx;width:20rpx;height:20rpx}
.indexBtn{height:92rpx;width:95%;margin:0 auto 10rpx;text-align:center;color:#fff;background:rgba(222,53,72,1);box-shadow:0px 0px 13px 1px rgba(49,49,49,0.13);border-radius:10rpx;}
.advertising{margin:0 auto;width:95%}
.advertising image{width:100%;height:274rpx}
</style>
